//  webpack 插件 VueSSRServerPlugin VueSSRClientPlugin
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin') // 生成服务端的包
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin') // 生成客户端的包
// 优化 和 选项合并的 包   webpack-node-externals lodash.merge
const nodeExternals = require('webpack-node-externals')
const merge = require('lodash.merge')

// 环境变量  决定入口是客户端还是服务端 （如果WEBPACK_TARGET=node则是服务端否则是客户端）
const TARGET_NODE = process.env.WEBPACK_TARGET === "node"
const target = TARGET_NODE ? "server" : "client"

const path = require('path')
module.exports = {
    css: {
        extract: false
    },
    outputDir: path.join(__dirname, './dist/' + target),
    configureWebpack: () => ({
        // 将 entry 指向应用程序的 server / client 文件
        entry: path.join(__dirname, `./src/entry-${target}.js`),
        // 对 builde renderer 提供 source map 支持
        devtool: 'source-map',
        /**这允许 webpack 以node 适用方式处理动态导入（dynamic import），
         * 并且还会在编译vue组件时告知 ‘vue-loader’ 输送面向服务器代码（server-oriented code）
         */
        target: TARGET_NODE ? "node" : "web",
        node: TARGET_NODE ? undefined : false,
        output: {
            // 告知 server builde 使用node 风格导出模块
            libraryTarget: TARGET_NODE ? "commonjs2" : undefined
        },
        externals: TARGET_NODE ? nodeExternals({
            // 不要外置化 webpack 需要处理的依赖模块。
            // 可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件，
            // 你还应该将修改 `global`（例如 polyfill）的依赖模块列入白名单
            whitelist: [/\.css$/]
        }) : undefined,
        optimization: {
            splitChunks: undefined
        },
        // 这是将服务器的整个输出构建为单个 JSON 文件的插件。
        // 服务端默认文件名为 `vue-ssr-server-bundle.json`
        plugins: [TARGET_NODE ? new VueSSRServerPlugin() : new VueSSRClientPlugin()]
    }),
    chainWebpack: config => {
        config.module
            .rule("vue")
            .use("vue-loader")
            .tap(options => {
                merge(options, {
                    optimizeSSR: false
                });
            });
    }
}